<template>
	<view class="serve-detail">
		<!-- 自定义navbar -->
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<scroll-view class="tab-scroll-sticky">
			<!-- 轮播banner -->
			<view class="sde-banner" :style="{ marginTop: statusHeight }"><u-swiper radius="0" :list="banner_list" height="265"></u-swiper></view>
			<view class="sde-price h120 dis_flex">
				<view class="dis_f ml40">
					<text class="fz50 fw" style="color: #fff">
						￥{{ price }}
						<text class="fz28 ml5">起</text>
					</text>
					<!-- 					<view class="bac_f ml24 w175 h50 radius25 dis_f jc" style="color: #fe3737">
						<text class="fz26 fw">券后</text>
						<text class="fz32 fw">￥550</text>
					</view> -->
				</view>
				<!-- <view class="tf fz28 mr40">正在抢购中</view> -->
			</view>
			<view class="sde-spec pt24 bac_f">
<!-- 				<view class="spec-que">
					<view class="que ml30 w206 lh56 dis_f radius6" style="background-color: #fff3f3">
						<image class="w28 ml24" src="../../static/image/spec-que.png" mode="widthFix"></image>
						<text class="ml12 fz24" style="color: #fe3a3a">满200减75</text>
					</view>
				</view> -->
				<view class="spec-h1 ml30 mt24 fz34 fw">
					<text>{{ serve_detail.name }}</text>
					<!-- <text>【家庭保洁】</text> -->
				</view>
				<view class="spec-h2 fz26 tf_999 ml30 mt16">
					<text>{{ serve_detail.s_name }}</text>
				</view>
				<view class="spec-line mt40 ml30 mr30" style="background-color: #e7e7e7; height: 2rpx"></view>
				<view class="spec-spec mt28">
					<view class="spec-info dis_flex pl30">
						<view class="">
							<text class="fz26 tf_999">规格</text>
							<text class="fz26 tf22 ml20 fw">已选:&nbsp;&nbsp;{{ current_spec }}</text>
						</view>
						<view class="mr30 dis_f" @click="getSpecInfo()">
							<text class="fz26" style="color: #f14537">更换</text>
							<image class="w16 ml16" src="../../static/image/spec-jiantou.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="fz24 tf_999 bac_f7 radius4 lh32 mt18 ml102 pl15 pr15 w166">共{{ spec_num }}种规格可选</view>
				</view>
				<view class="mt40 mb24">
					<image class="w" src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221015/52bcb322ceb8cd6bfd29b3e378f1a49c.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="dis_flex bac_f pl30 pr30 mt24 mb24 h156">
				<view class="tf32 fw ">{{ bus_list.name }}</view>
				<view class="dis_f" @click="selectBus">
					<view class="fz26">选择商家</view>
					<image class="ml16 w16 h16" src="../../static/image/user_you.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="bac_f" id="scrollView" :class="{ fixed: istop }" :style="istop == 1 ? `margin-top:${statusHeight}` : ''">
				<u-tabs
					:list="tab_list"
					@click="tabClick"
					lineColor="#F14537"
					:activeStyle="{ color: '#F14537', fontWeight: 'bold' }"
					:inactiveStyle="{ fontWeight: 'bold' }"
					lineWidth="60"
					itemStyle="height:102rpx;padding:0 128rpx"
				></u-tabs>
			</view>
			<view class="sde-content bac_f oh pl24 pr24 pb24 mb24" id="sde-content">
				<view class="mt20" v-for="(v, i) in serve_content" :key="i"><image class="w" :src="v" mode="widthFix"></image></view>
			</view>
			<view class="sde-evaluate pl30 pr30  bac_f oh" id="sde-evaluate" v-for="(item, index) in eval_list" :key="index">
				<view class="user-info dis_flex mt40">
					<view class="dis_f">
						<image class="radius501" :src="item.user.avatar" mode="aspectFill" style="width: 68rpx;height: 68rpx;"></image>
						<view class="ml22">
							<text class="fz28 tf33">{{ item.user.nickname }}</text>
							<view style="margin-top: 6rpx; margin-left: -4rpx"><u-rate size="20rpx" :count="xincount" readonly :value="item.zhiliang_star" active-color="#FF970E"></u-rate></view>
						</view>
					</view>
					<view class="fz24 tf_999">
						<text>{{ item.time }}</text>
					</view>
				</view>
				<view class="evaluate-info mb20 mt32 pl30 pr30 pt24 pb30 radius16" style="background-image: linear-gradient(#f8f8f8, #fff)">
					<text class="fz26">{{ item.text }}</text>
					<view class="dis_f fww mt24">
						<video v-if="item.video" :src="item.video" objectFit="cover" class="w200 h200 mr10 radius8"></video>
						<image @click="clickImage(v, i)" class="w200 mr10 h200 radius8" v-for="(v, i) in item.images" :key="v" :src="v" mode="aspectFill"></image>
					</view>
				</view>
				<view class="h1 border_b3"></view>
			</view>
		</scroll-view>
		<view class="w h200"></view>
		<view class="bac_f sde-footer dis_f padding24 p_f" style="width: 100%;">
			<button class="dfd_c ac ml18 bac_f" open-type="contact">
				<image class="" src="../../static/image/spec-kf.png" mode="aspectFill" class="w40 h40"></image>
				<text class="mt10 fz22">客服</text>
			</button>
			<view class="dfd_c ac ml46 p_re" @click="goServeCart">
				<image src="../../static/image/spec-cart.png" mode="aspectFill" class="w40 h40"></image>
				<text class="mt10 fz22">购物车</text>
				<view v-if="cart_s != 0" class="w20 h20 radius50 tf tac bac_4537 p_ab" style="top: -2rpx;right:4rpx;font-size: 16rpx;">{{ cart_s }}</view>
			</view>
			<view class="radius8 w220 h88 tf43 border11 fz32 dis_f jc ml40" style="box-sizing: border-box" @click="joinServeCart">加入购物车</view>
			<view class="col-th radius8 w220 h88 tf fz32 dis_f jc ml24" @click="goOrderConfirm">立即预约</view>
		</view>
		<!-- 弹出窗 -->
		<u-popup :show="popshow" mode="bottom" @close="popshow = false">
			<view class="pop-cart radius_5">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx">
					<text class="fz34 tf33 ml238">服务内容</text>
					<image @click="popshow = false" class="w44 ml238" src="../../static/image/server_close.png" mode="widthFix"></image>
				</view>
				<view class="bac_f padding30 bz w" style="padding-bottom: 0">
					<view class="dis_f ac js">
						<image :src="gg_image" mode="aspectFill" class="w156 h156 radius12 mr28"></image>
						<view class="fz26">
							<view class="fz32 tf_222 fw">{{ serve_detail.name }}</view>
							<view class="tf_999 pt5 pb20">{{ serve_detail.s_name }}</view>
							<view class="dis_f ac">
								<view class="tf1 fz36 fw">¥{{ price }}起</view>
							</view>
						</view>
					</view>
					<view class="fw fz28 tf_222 mt40 mb20">请选择商品</view>
					<scroll-view scroll-y="true" class="dis_f js ac fww" style="max-height: 520rpx">
						<view
							class="fz28 pl30 mt10 pr30 pt20 pb20 bac_f8 mr20 radius6 border_f8 bz ib"
							v-for="(v, i) in spec_detail"
							:key="i"
							@click="selectSpec(i)"
							:class="{ active: serve_id == v.id }"
						>
							<text>{{ v.gg_name }}</text>
						</view>
					</scroll-view>
					<view class="w h136 bac_f dis_f ac mt166"><view class="w690 lh88 tf fz32 tac auto col-th radius8" @click="popshow = false">确认</view></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { goodsDetail, goodsSpec, goodsSpecNum, storeEval, storeList } from '@/config/api.js';
export default {
	data() {
		return {
			statusHeight: '',
			title: '', //标题
			bus_list: null, //店铺
			eval_list: [], //评价列表
			cart_s: 0, //购物车上标数量
			istop: 0, //是否固定
			gg_image: '', //规格图片
			serve_content: [], //服务内容
			current_spec: '', //当前的规格
			price: '', //价格
			spec_num: '', //规格总数
			spec_detail: [], //规格详细信息
			serve_id: '', //当前服务页面id
			serve_detail: [], //服务详细信息
			popshow: false,
			xincount: '5',
			xinscore: '4',
			banner_list: [], //轮播图
			tab_list: [
				{
					name: '服务内容'
				},
				{
					name: '用户评价'
				}
			]
		};
	},
	onLoad(options) {
		this.serve_id = options.id;
		this.getSeverInfo();
		this.getSpecNum();
		this.getServeEval();
		this.getBusList();
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 44 + 'px';
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#scrollView')
			.boundingClientRect(data => {
				console.log('布局位置信息', JSON.stringify(data));
				console.log('节点离页面顶部的距离' + data.top);
				this.myScroll = data.top;
			})
			.exec();
	},
	onPageScroll: function(e) {
		if (e.scrollTop > this.myScroll) {
			console.log(this.istop);
			this.istop = 1;
		} else {
			this.istop = 0;
		}
	},
	methods: {
		//点击图片
		clickImage(v, i) {
			console.log(v);
			let imgs = [];
			this.eval_list.forEach(v => {
				v.images.forEach(v => {
					imgs.push(v);
				});
			});
			console.log(imgs);
			uni.previewImage({
				current: v,
				urls: imgs
			});
		},
		//获取店铺列表
		getBusList() {
			storeList().then(res => {
				console.log('res', res[0]);
				this.bus_list = res[0];
				console.log('1', this.bus_list);
			});
		},
		//跳转选择商家
		selectBus() {
			let bus = this.bus_list;
			uni.navigateTo({
				url: '../serveList/serveList',
				events: {
					data: res => {
						console.log(res);
						this.bus_list = res;
					}
				}
			});
		},
		//获取评价内容
		getServeEval() {
			storeEval({ sku_id: this.serve_id }).then(res => {
				console.log('评价信息', res);
				this.eval_list = res;
			});
		},
		// 滚动固定位置
		tabClick(item) {
			console.log(item);
			if (item.index == 0) {
				uni.pageScrollTo({
					scrollTop: 600,
					duration: 300
				});
			} else {
				uni.pageScrollTo({
					scrollTop: 2000,
					duration: 300
				});
			}
		},
		//获取规格数量
		getSpecNum() {
			let sid = this.serve_id;
			goodsSpecNum({
				id: sid
			}).then(res => {
				console.log('规格数量', res);
				this.spec_num = res;
			});
		},
		//选择规格
		selectSpec(i) {
			this.serve_id = this.spec_detail[i].id;
			goodsDetail({
				id: this.serve_id
			}).then(res => {
				this.serve_detail = res;
				this.price = res.price;
				this.banner_list = res.images;
				this.current_spec = res.gg_name;
				this.gg_image = res.gg_image;
				this.serve_content = res.content_images;
			});
		},
		//获取规格信息
		getSpecInfo() {
			this.popshow = true;
			let sid = this.serve_id;
			goodsSpec({
				id: sid
			}).then(res => {
				console.log('规格', res);
				this.spec_detail = res;
			});
		},
		//获取服务信息
		getSeverInfo() {
			let sid = this.serve_id;
			goodsDetail({
				id: sid
			}).then(res => {
				console.log('信息', res);
				this.serve_detail = res;
				this.price = res.price;
				this.banner_list = res.images;
				this.current_spec = res.gg_name;
				this.gg_image = res.gg_image;
				this.serve_content = res.content_images;
				this.title = res.name;
			});
		},
		//加入购物车
		joinServeCart() {
			this.cart_s++;
			let cart_info = [];
			let page_obj = new Object();
			page_obj.id = this.serve_id;
			page_obj.serve_num = this.serve_num;
			page_obj.name = this.serve_detail.name;
			page_obj.s_name = this.serve_detail.s_name;
			page_obj.price = this.price;
			page_obj.spec = this.current_spec;
			page_obj.gg_image = this.gg_image;
			page_obj.store_id = this.bus_list.id;
			console.log(page_obj);
			if (uni.getStorageSync('cart_info')) {
				uni.getStorageSync('cart_info').forEach(v => {
					cart_info.push(v);
				});
				uni.removeStorageSync('cart_info');
				cart_info.push(page_obj);
				uni.setStorage({
					key: 'cart_info',
					data: cart_info
				});
			} else {
				cart_info.push(page_obj);
				uni.setStorage({
					key: 'cart_info',
					data: cart_info
				});
			}
		},
		//跳转购物车界面
		goServeCart() {
			uni.navigateTo({
				url: '../serveCart/serveCart'
			});
		},
		//跳转订单确认界面
		goOrderConfirm() {
			uni.navigateTo({
				url: `../orderConfirm/orderConfirm?serve_id=${this.serve_id}&store_id=${this.bus_list.id}`
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
button::after {
	border: none;
}
button {
	position: relative;
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	// font-size: 18px;
	text-align: center;
	text-decoration: none;
	// line-height: 1;
	line-height: 1.35;
	// border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	color: #000000;
	background-color: #fff;
}

.serve-detail {
	.tab-scroll-sticky {
		.sde-price {
			background-image: url('https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/05ce73c902a2997412d5a2066f0aada2.jpg');
			background-size: cover;
		}

		.sde-evaluate {
			.evaluate-info {
				text {
					display: -webkit-box;
					word-break: break-all;
					/*换行规则*/
					text-overflow: ellipsis;
					/*最后使用省略号显示*/
					overflow: hidden;
					/*超出部分隐藏*/
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/*能够显示几行*/
				}
			}
		}
	}
}

.active {
	border: 1px solid #f14537;
	background-color: rgba(241, 69, 55, 0.05);
	color: #f14537;
}
.fixed {
	position: fixed;
	top: 0rpx;
	z-index: 10;
	background-color: #fff;
}
</style>
